<template>
  <el-form ref="ruleForms" :model="ruleForm" :rules="rules" label-width="100px">
    <el-form-item label="分类名称" prop="cat_name">
      <el-input v-model="ruleForm.cat_name" />
    </el-form-item>

    <el-form-item v-if="!tabRow" label="父级分类" prop="cat_pid">
      <el-cascader
        v-model="cascader"
        :options="values"
        :props="cateProps"
        style="width: 100%"
        clearable
        :value="values.cat_id"
        @change="handleChange"
      >
        <template slot-scope="{ node, data }">
          <span>{{ data.cat_name }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
    </el-form-item>

    <el-form-item style="margin-bottom: -10px; margin-top: 40px">
      <el-row type="flex" justify="end">
        <el-button size="small" @click="btnRemove">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmits"
        >确定</el-button>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script>
import { categoriesList, categoriesAdd, categoriesModify } from '@/api/categories'
export default {
  name: 'ListLayer',
  components: {},
  props: {
    listShow: {
      type: Boolean,
      required: true
    },
    tabRow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        cat_level: 0,
        cat_name: null,
        cat_pid: null
      },
      cateProps: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        checkStrictly: true,
        multiple: false
      },
      rules: {
        cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        cat_pid: [{ required: true, message: '请选择父级分类', trigger: 'blur' }]
      },
      cascader: [],
      values: []
    }
  },
  computed: {}, // 计算属性
  watch: {},
  created() {
    console.log(this.tabRow)
    this.categoriesList()
    console.log(this.listShow)
  },
  mounted() {},
  methods: {
    async categoriesList() {
      this.ruleForm.cat_name = this.tabRow && this.tabRow.cat_name
      const { data } = await categoriesList()
      // console.log(data.data)
      this.values = data.data
    },
    handleChange(value) {
      this.ruleForm.cat_level = value.length
      this.ruleForm.cat_pid = value[value.length - 1]
    },
    onSubmits() {
      console.log(this.tabRow)
      this.tabRow
        ? this.$refs.ruleForms.validate().then(
          async() => {
            try {
              const { data } = await categoriesModify(this.tabRow.cat_id, { cat_name: this.ruleForm.cat_name })
              this.btnRemove()
              this.$bus.$emit('updateList')
              this.$message.success('更新成功!')
            } catch (error) {
              console.log(error)
            }
          },
          error => {
            console.log(error.message)
          }
        )
        : this.$refs.ruleForms.validate().then(
          async() => {
            try {
              await categoriesAdd(this.ruleForm)
              this.btnRemove()
              this.$bus.$emit('updateList')
              this.$message.success('发送成功!')
            } catch (error) {
              console.log(error)
            }
          },
          error => {
            console.log(error.message)
          }
        )
    },
    btnRemove() {
      this.$refs.ruleForms.resetFields()
      this.cascader = []
      this.$emit('update:listShow', false)
    }
  }
}
</script>

<style scoped>
.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
